<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>充值收银台</title>
    <script th:replace="~{cashier/cashierJs :: script}"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .checkout-container {
            max-width: 600px;
            margin: 0 auto;
            background: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        .checkout-container h2 {
            text-align: center;
            margin-bottom: 20px;
        }
        .item-list {
            margin-bottom: 20px;
        }
        .item {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
        }
        .total {
            font-size: 18px;
            font-weight: bold;
            text-align: right;
            margin-bottom: 20px;
        }
        .payment-methods label {
            display: block;
            margin-bottom: 10px;
        }
        .submit-btn {
            display: block;
            width: 100%;
            padding: 10px;
            background-color: #007bff;
            color: #fff;
            border: none;
            border-radius: 4px;
            font-size: 16px;
            cursor: pointer;
        }
        .submit-btn:hover {
            background-color: #0056b3;
        }
        .result-message {
            margin-top: 20px;
            text-align: center;
            font-size: 16px;
            color: #333;
        }
    </style>
</head>
<body>

<div class="checkout-container">
    <h2>收银台</h2>

    <!-- 商品信息 -->
    <div class="item-list">
        <div class="item">
            <span>合作方ID</span>
            <span th:text="${request.partnerId}"></span>
        </div>
        <div class="item">
            <span>会员ID</span>
            <span th:text="${request.memberId}"></span>
        </div>
        <div class="item">
            <span>账户号</span>
            <span th:text="${request.accountNo}"></span>
        </div>
        <div class="item">
            <span>金额</span>
            <span th:text="${request.amount}"></span>
        </div>
        <div class="item">
            <span>备注</span>
            <span th:text="${request.memo}"></span>
        </div>
    </div>

    <!-- 支付方式 -->
    <div class="payment-methods">
        <label th:each="payMethod : ${payMethods}">
            <input type="checkbox" name="payMethod" th:value="${payMethod.code}">
            <span th:text="${payMethod.name}"  class="name"></span>
            <span th:text="${payMethod.title}"  class="title"></span>
        </label>
    </div>

    <!-- 提交按钮 -->
    <button class="submit-btn" onclick="submitPayment()">提交支付</button>

    <!-- 结果提示 -->
    <div id="result-message" class="result-message"></div>
</div>

<script>

    // 模拟异步提交支付
    async function submitPayment() {
        // 获取用户选择的支付方式
        const selectedPayMethods = Array.from(
            document.querySelectorAll('input[name="payMethod"]:checked')
        ).map(input => input.value);

        if (selectedPayMethods.length === 0) {
            alert('请选择至少一种支付方式！');
            return;
        }

        // 显示加载提示
        const resultMessage = document.getElementById('result-message');
        resultMessage.textContent = '正在处理支付请求，请稍候...';

        try {
            // 异步请求
            const response = await fetch('/pgw/cashier/deposit/submit', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    payMethods: selectedPayMethods,
                    partnerId: '[[${request.partnerId}]]',
                    memberId: '[[${request.memberId}]]',
                    accountNo: '[[${request.accountNo}]]',
                    amount: '[[${request.amount}]]',
                    memo: '[[${request.memo}]]'
                })
            });

            const result = await response.json();
            processSubmitResult(result, resultMessage);

        } catch (error) {
            // 处理网络或其他错误
            resultMessage.textContent = '支付失败：网络错误或服务器无响应。';
            resultMessage.style.color = 'red';
        }
    }
</script>

</body>
</html>